<template>
    <v-card>
        <div>
            <v-toolbar color="white" height="100" elevation="0">
                <v-row>
                    <v-col cols="8">
                        <v-text-field prepend-icon="search" label="高级搜索" v-model="search" outlined class="hidden-sm-and-down"></v-text-field>
                    </v-col>
                    <v-col cols="4">
                        <v-select :items="items" label="筛选" prepend-icon="filter_list" v-model="searchMark" outlined></v-select>
                    </v-col>
                </v-row>
            </v-toolbar>
            <v-divider></v-divider>
            <v-simple-table :search="search">
                <thead>
                    <tr>
                        <th class="text-left">序号</th>
                        <th class="text-left">Name</th>
                        <th class="text-left">Calories</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in desserts" :key="index">
                        <td>{{ item.index }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.calories }}</td>
                    </tr>
                </tbody>
            </v-simple-table>
            <v-divider></v-divider>
            <div class="text-center">
                <v-pagination v-model="page" :length="10"></v-pagination>
            </div>
        </div>
    </v-card>
</template>
<script lang='ts'>
import { Vue, Prop, Component } from 'vue-property-decorator';
@Component({
    components: {},
})
export default class Dashboard extends Vue {
    private page = 1;
    private search = '';
    private searchMark = 'time';
    private items = [
        { text: 'State 1' },
        { text: 'State 2' },
        { text: 'State 3' },
        { text: 'State 4' },
        { text: 'State 5' },
        { text: 'State 6' },
        { text: 'State 7' },
    ];
    private states = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado'];
    private desserts = [
        {
            index: 1,
            name: 'Frozen Yogurt',
            calories: 159,
        },
        {
            index: 2,
            name: 'Ice cream sandwich',
            calories: 237,
        },
        {
            index: 3,
            name: 'Eclair',
            calories: 262,
        },
        {
            index: 4,
            name: 'Cupcake',
            calories: 305,
        },
        {
            index: 5,
            name: 'Gingerbread',
            calories: 356,
        },
        {
            index: 6,
            name: 'Jelly bean',
            calories: 375,
        },
        {
            index: 7,
            name: 'Lollipop',
            calories: 392,
        },
        {
            index: 8,
            name: 'Honeycomb',
            calories: 408,
        },
        {
            index: 9,
            name: 'Donut',
            calories: 452,
        },
        {
            index: 10,
            name: 'KitKat',
            calories: 518,
        },
        {
            index: 11,
            name: 'Frozen Yogurt',
            calories: 159,
        },

        {
            index: 12,
            name: 'Honeycomb',
            calories: 408,
        },
        {
            index: 13,
            name: 'Donut',
            calories: 452,
        },
        {
            index: 14,
            name: 'KitKat',
            calories: 518,
        },
    ];
}
</script>